<template>
  <div class="musiclist">
    <!-- 头部导航栏和搜索框 -->
    <div class="headBar">
      <!-- 导航栏 -->
      <div class="headerBar_navmenu">
        <el-menu :default-active="'1'" mode="horizontal">
          <el-menu-item index="1">歌曲列表</el-menu-item>
          <el-menu-item index="2">评论</el-menu-item>
          <el-menu-item index="3">收藏者</el-menu-item>
        </el-menu>
      </div>

      <!-- 搜索框 -->
      <div class="headerBar_search">
        <el-input
          v-model="search"
          placeholder="搜索歌单音乐"
          suffix-icon="el-icon-search"
        >
        </el-input>
      </div>
    </div>

    <!-- 歌单列表 -->
    <div class="songlist">
      <el-table
        :data="songlist"
        @row-dblclick="playSong"
        style="width: 100%"
        stripe
        highlight-current-row
        v-double-click
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="name" label="标题" width="360">
        </el-table-column>
        <el-table-column prop="artistname" label="歌手" width="150">
        </el-table-column>
        <el-table-column prop="album" label="专辑" width="320">
        </el-table-column>
        <el-table-column prop="time" label="时长">
          <template slot-scope="scope">
            {{ scope.row.time | songTimeFilter }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'musiclist',
  data() {
    return {
      // 搜索内容
      search: '',
      // 歌单列表
      songlist: [],
    }
  },
  computed: {
    ...mapState(['songlistId']),
  },
  created() {},
  mounted() {
    this.getSonglist(this.songlistId)
  },
  watch: {
    // 监听 songlistId ，当参数值发生变化时，执行以下方法
    // newVal: 现在的值  oldVal: 之前的值
    songlistId: function (newVal, oldVal) {
      const songlistId = newVal
      this.getSonglist(songlistId)
    },
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },
  },
  methods: {
    ...mapMutations(['changeMusicPlayInfo']),

    // 获取歌单相关信息
    async getSonglist(songlistId) {
      const { data: res } = await this.$http({
        url: `/playlist/track/all?id=${songlistId}`,
        withCredentials: true, //关键
      })

      // console.log(res.songs)
      this.getSonglistAboutInfo(res.songs)
    },
    // 提取歌单列表要用的相关信息的相关信息
    getSonglistAboutInfo(list) {
      let tmepListDatas = []

      let index = 0
      list.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 音乐艺术家名称 artistname
         */
        listObj.id = item.id
        listObj.time = item.dt
        listObj.name = item.name
        listObj.album = item.al.name
        listObj.picUrl = item.al.picUrl

        let str = ''
        for (let i = 0; i < item.ar.length; i++) {
          str = str + item.ar[i].name
          if (i != item.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        listObj.index = index
        index++
        return tmepListDatas.push(listObj)
      })

      this.songlist = tmepListDatas
      // console.log(this.songlist)
    },
    // 播放歌曲
    playSong(row) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = this.songlist

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
  },
}
</script>


<style lang="less" scoped>
.musiclist {
  display: flex;
  flex-direction: column;
}
.headBar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;

  > .headerBar_navmenu {
    margin-left: 36px;

    /deep/ ul.el-menu {
      border-bottom: 0px;
    }
    /deep/ li.el-menu-item {
      height: 48px;
      font-size: 16px;
    }
    /deep/ li.el-menu-item.is-active {
      font-size: 18px;
      font-weight: 700;
      border-bottom: 3.6px solid red;
      // border-bottom-color: red;
    }
  }

  > .headerBar_search {
    margin-right: 36px;

    /deep/ .el-input__inner {
      border-radius: 24px;
      height: 20px;
      background-color: #f5f1f1;
      border: 0px;
      font-size: 12px;
    }
    /deep/ .el-input {
      position: relative;
      top: 15px;
    }
    /deep/ .el-input__suffix-inner {
      position: relative;
      top: -8px;
      color: black;
    }
  }
}

.songlist {
  /deep/ .el-table_1_column_1 {
    padding-left: 20px;
  }
  /deep/ div.cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .el-table__cell {
    cursor: pointer;
  }
}
</style>